@import "tokens/colors.css";
@import "tokens/typography.css";
@import "tokens/spacing.css";
@import "tokens/effects.css";

html{font-size:20px}

/* ---- pull quote (shared) ---- */
.pull-quote{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.25rem;padding:0.5rem 0}
.pull-quote-rule{width:40px;height:1px;background:var(--gold-700);transform:scaleX(0);transform-origin:center;transition:transform var(--duration-slow) var(--ease-out)}
html[data-fx] .pull-quote[data-revealed] .pull-quote-rule,html[data-fx] .pull-quote-rule[data-revealed]{transform:scaleX(1)}
@media (prefers-reduced-motion: reduce) {
  .pull-quote-rule{transform:scaleX(1);transition:none}
}
.pull-quote-text{margin:0;font:var(--text-display-md);font-size:clamp(1.375rem,3vw,1.875rem);line-height:1.4;color:var(--accent-primary-strong);text-wrap:balance;max-width:32rem}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .pull-quote-text{
    background-image:linear-gradient(100deg, transparent 16%, var(--parchment-50) 45%, var(--gold-300) 50%, var(--parchment-50) 55%, transparent 84%), linear-gradient(var(--accent-primary-strong), var(--accent-primary-strong));
    background-size:300% 100%, 100% 100%;
    background-repeat:no-repeat;
    background-position:200% 0, 0 0;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    filter:drop-shadow(0 0 0 transparent);
  }
  html[data-fx] .pull-quote[data-revealed] .pull-quote-text{
    animation:quoteIlluminate 1500ms var(--ease-out) 260ms both;
  }
  @keyframes quoteIlluminate{
    0%{background-position:200% 0, 0 0; filter:drop-shadow(0 0 0 transparent)}
    60%{filter:drop-shadow(0 0 16px color-mix(in srgb, var(--gold-500) 55%, transparent))}
    100%{background-position:-140% 0, 0 0; filter:drop-shadow(0 0 5px color-mix(in srgb, var(--gold-500) 20%, transparent))}
  }
  @media (prefers-reduced-motion: reduce) {
    html[data-fx] .pull-quote[data-revealed] .pull-quote-text{animation:none}
    .pull-quote-text{background-position:-140% 0, 0 0;filter:none}
  }
}
.pull-quote-cite{margin:0;font:var(--text-mono-sm);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--accent-primary-strong)}
.pull-quote-cite a{color:inherit}
.pull-quote-cite a:hover{color:var(--accent-primary)}

/* ---- eyebrow (shared) ----
   color is --accent-primary-strong: gold-700 on the toggleable page surface,
   automatically gold-300 in dark mode (see tokens/colors.css). Elements that sit on a
   section with a permanently dark background (hero photos, CTA bands) should override
   with an explicit inline color:var(--gold-300) instead of relying on this token, since
   their background never toggles. */
.eyebrow{display:inline-block;font:var(--text-eyebrow);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--accent-primary-strong)}

/* ---- cookie consent (shared) ---- */
.cookie-consent{box-sizing:border-box;position:fixed;z-index:60;right:clamp(1rem,4vw,2rem);bottom:clamp(1rem,4vw,2rem);width:min(340px,calc(100vw - 2rem));background:var(--surface-card);border:1px solid var(--border-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-lifted);padding:var(--space-6) var(--space-6) var(--space-5);opacity:0;transform:translateY(16px);transition:opacity var(--duration-slow) var(--ease-out),transform var(--duration-slow) var(--ease-out);pointer-events:none}
.cookie-consent[data-open]{opacity:1;transform:translateY(0);pointer-events:auto}
.cookie-consent-title{margin:0 0 var(--space-3);font:700 clamp(2.25rem,7vw,2.75rem)/0.9 var(--font-display);font-style:italic;letter-spacing:var(--tracking-tight);color:var(--accent-primary-strong)}
.cookie-consent-copy{margin:0 0 var(--space-5);font:var(--text-body-sm);color:var(--text-secondary)}
.cookie-consent-actions{display:flex;align-items:center;gap:var(--space-3);border-top:1px solid var(--border-subtle);padding-top:var(--space-4)}
.cookie-consent-action{appearance:none;background:none;border:none;padding:0;cursor:pointer;font:var(--text-mono-sm);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-primary);text-decoration:underline;text-decoration-color:transparent;transition:color var(--duration-fast) var(--ease-standard),text-decoration-color var(--duration-fast) var(--ease-standard)}
.cookie-consent-action:hover,.cookie-consent-action:focus-visible{color:var(--accent-primary-strong);text-decoration-color:currentColor}
.cookie-consent-action[data-cookie-decline]{color:var(--text-muted)}
.cookie-consent-sep{color:var(--border-strong);font:var(--text-mono-sm)}
@media (prefers-reduced-motion: reduce){.cookie-consent{transition:none}}

/* ---- foil cover (shared) ----
   A gold-foil sheen that follows the pointer across a cover, with an optional tilt and a record
   that slides out of the sleeve. Pointer handling lives in /assets/foil.js.
     data-foil="tilt"   tilts .foil-sleeve toward the pointer (EP, track and drawer covers)
     data-foil="shine"  sheen only, no tilt
   Markup: <div class="foil" data-foil="tilt">
             <div class="foil-disc" aria-hidden="true" style="--art:url('/assets/covers/...')"><div class="foil-disc-face"></div></div>  (optional)
             <div class="foil-sleeve">...cover...<span class="foil-shine" aria-hidden="true"></span><span class="foil-spec" aria-hidden="true"></span></div>
           </div> */
.foil{position:relative;perspective:900px}
.foil-sleeve{position:relative;z-index:1;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.foil-shine,.foil-spec{position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity 500ms var(--ease-out)}
.foil-shine{
  background:
    linear-gradient(118deg, transparent 30%, rgba(201,151,75,.55) 42%, rgba(255,244,214,.8) 48%, rgba(201,151,75,.55) 54%, rgba(138,95,36,.4) 60%, transparent 70%),
    url('/assets/textures/grain.png');
  background-size:280% 280%, 160px;
  background-position:calc(var(--mx,.5) * 100%) calc(var(--my,.5) * 100%), 0 0;
  mix-blend-mode:overlay
}
.foil-spec{background:radial-gradient(circle at calc(var(--mx,.5) * 100%) calc(var(--my,.5) * 100%), rgba(255,250,236,.55), transparent 42%);mix-blend-mode:soft-light}
.foil.is-on .foil-shine,.foil.is-on .foil-spec{opacity:1}
.foil-disc{position:absolute;inset:3%;z-index:0;pointer-events:none;transition:transform 900ms var(--ease-out)}
.foil.is-on .foil-disc{transform:translateX(38%)}
.foil-disc-face{position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle, transparent 0 31%, #0e0b07 31.4% 33%, transparent 33.4%),
    repeating-radial-gradient(circle, #1a1510 0 1.1px, #241d15 1.4px 2.6px),
    #17130d;
  box-shadow:0 14px 28px -8px rgba(23,19,13,.5);
  animation:foilSpin 5s linear infinite;animation-play-state:paused}
.foil-disc-face::before{content:"";position:absolute;inset:34%;border-radius:50%;background:var(--art) center/cover;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.foil-disc::before{content:"";position:absolute;left:50%;top:50%;z-index:1;width:3%;height:3%;transform:translate(-50%,-50%);border-radius:50%;background:var(--surface-page)}
.foil-disc::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 210deg, transparent 0 8%, rgba(255,240,210,.16) 13%, transparent 20% 55%, rgba(255,240,210,.1) 62%, transparent 70%)}
.foil.is-on .foil-disc-face{animation-play-state:running}
@keyframes foilSpin{to{transform:rotate(360deg)}}
@media (max-width:600px){.foil.is-on .foil-disc{transform:translateX(24%)}}
@media (prefers-reduced-motion: reduce){
  .foil-sleeve{transform:none !important}
  .foil-disc{transition:none}
  .foil-disc-face{animation:none}
}


/* ---- Apple-design pass (2026-10-15) ---- */
/* Press feedback: react on pointer-down, not only on release. */
html :is(.listen-trigger,.cta-btn,.btn,.contact-submit,.track-listen,.listen-option,.sub-btn,.view-btn):active{transform:scale(.97);transition-duration:100ms}
/* Visible focus ring on form fields (pages remove the outline and only change the border color). */
input:focus-visible,textarea:focus-visible,select:focus-visible{box-shadow:0 0 0 2px var(--focus-ring)}
/* Frosted header and nav become solid when the visitor asks for less transparency or more contrast. */
@media (prefers-reduced-transparency: reduce){
  .site-header,[data-sticky-nav]{background:var(--surface-page) !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
}
@media (prefers-contrast: more){
  .site-header,[data-sticky-nav]{background:var(--surface-page) !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;border-bottom-color:var(--ink-950) !important}
  input,textarea,select{border-color:var(--ink-950)}
}